<template>
  <div class="exhibition">
    <div class="exhibition-item-box" v-for="(item, index) in exhibitionList" :key="index">
      <router-link class="exhibition-item" :to="{path: item.path}" :title="item.title">
        <img :src="item.img" :alt="item.title">
      </router-link>
    </div>
  </div>
</template>

<script>
import { getExhibition } from '@/api/home/index'

export default {
  name: 'exhibition',
  data () {
    return {
      exhibitionList: []
    }
  },
  methods: {
    getExhibition () {
      getExhibition().then(({ data }) => {
        this.exhibitionList = data.data
      })
    }
  },
  created () {
    this.getExhibition()
  }
}
</script>

<style lang="scss" scoped>
  .exhibition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 10px;
    .exhibition-item {
      display: block;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  // .exhibition {
  //   display: flex;
  //   flex-direction: row;
  //   flex-wrap: wrap;
  //   margin-top: 5px;
  //   .exhibition-item-box + .exhibition-item-box {
  //     margin-bottom: 5px;
  //   }
  //   .exhibition-item-box {
  //     width: calc(50% - 10px);
  //     padding: 0 5px;
  //     .exhibition-item {
  //       display: block;
  //       img {
  //         display: block;
  //         width: 100%;
  //         height: 100%;
  //       }
  //     }
  //   }
  // }
</style>
